



<link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/layui/css/layui.css">
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/echarts/echarts.js"></script>
<%--<script src="/springmvc/static/js/html2canvas.js"></script>
<script src="/springmvc/static/js/jspdf.debug.js"></script>
<script src="/springmvc/static/js/jq.js"></script>--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
  <title>SAS测试结果页面</title>
</head>
<body>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-danger " lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>

<script type="text/html" id="rowBarDemo">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="check">查看</a>
</script>

<form class="layui-form" action="" style="margin-top: 10px">
  <div class="layui-inline">
    <label class="layui-form-label">姓名</label>
    <div class="layui-input-inline">
      <input type="text" name="name" placeholder="请输入姓名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-inline">
    <label class="layui-form-label">测试计划ID</label>

    <div class="layui-inline" style="width: 235px;">
      <select placeholder="选择ID" id="cccc" name="test_plan_id"></select>
    </div>
  </div>
  <div class="layui-inline">
    <div class="layui-input-inline">
      <button class="layui-btn" lay-submit lay-filter="selectFormfilter">查询</button>
      <button type="reset" class="layui-btn layui-btn-primary" id="myButton">重置</button>
    </div>
  </div>
</form>
<style>
  #show {
    /*width: 600px;*/
    /*height: 800px;*/
    /*border: 4px solid cornflowerblue;*/
    margin: auto;

    background: #C2BE9E;
    font-family: 华文行楷;
    font-size: 30px;
    /*绝对定位也行，但是父也不占位。包含块布局的时候一般父相对  父相子绝*/
  }

  #bb {
    width: 200px;
    height: 80px;
    margin: auto;
    line-height: 80px;
  }

  #result {
    width: 400px;
    height: 80px;
    margin: auto;
    line-height: 80px;

  }
</style>

<div id="show" style="width: 100%;height: 100%; display: none;">
  <div id="bb">SAS测试结果</div>
  <div id="result"></div>
  <div style="width: 100%;height: 350px;" id="shopping"></div>
</div>

<table id="demo" lay-filter="test"></table>
</body>
<script>
  layui.config({
    version: 1,
    base: '${pageContext.request.contextPath}/echarts/' //这个就是你放Echart.js的目录
  }).use(['table', 'jquery', 'form', 'laydate', 'echarts'], function () {
    var table = layui.table;
    var form = layui.form;
    var $ = layui.jquery, laydate = layui.laydate, echarts = layui.echarts;

    //第一个实例
    var myTable = table.render({
      elem: '#demo'
      , height: 550
      , url: '${pageContext.request.contextPath}/accountresult/findAllresult' //数据接口
      /*, parseData: function (res) { //res 即为原始返回的数据
        return {
          "code": 0, //解析接口状态
          "msg": "", //解析提示文本
          "count": res.totalElements, //解析数据长度
          "data": res.content //解析数据列表
        };
      }*/
      , page: true //开启分页
      , limit: 10
      , limits: [5, 10, 15, 20, 25, 30, 50, 100]
      , toolbar: '#barDemo'
      , cols: [
        [ //表头
          {type: 'checkbox', fixed: 'left'}
          , {field: 'id', title: 'ID', width: 120, sort: true}
          , {field: 'name', title: '姓名', width: 120}
          , {field: 'phone', title: '电话', width: 120}
          , {field: 'create_time', title: '测试时间', width: 120}
          , {field: 'forward', title: '正向得分', width: 120, sort: true}
          , {field: 'inversion', title: '反向得分', width: 120, sort: true}
          , {field: 'test_plan_id', title: '测试计划ID', width: 120, sort: true}
          , {fixed: 'right', title: '操作', width: 120, align: 'center', toolbar: '#rowBarDemo'}
        ]
      ]
    });
    /*
    *
    * 行内工具栏
    * */
    //监听行工具事件
    table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data //获得当前行数据
              //console.log(data)
              , layEvent = obj.event; //获得 lay-event 对应的值
      if (layEvent === 'check') {
        //layer.msg('查看操作');
        //弹出层
        layer.open({
          title: '焦虑测试结果图示',
          type: 1,
          content: $('#show'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
          area: ['600px', '600px']
        });
        $.ajax({
          url: "${pageContext.request.contextPath}/accountresult/check",
          type: "POST",
          dataType: "JSON",
          data: {id: obj.data.id},
          success: function (ret) {
            var forward = ret.data.forward
            var inversion = ret.data.inversion
            var myChart = echarts.init(document.getElementById('shopping'));
            var score = forward + inversion;
            var string = "";
            if (score < 50) {
              string = "您的测试结果为无焦虑症状"
            } else if (score <= 60) {
              string = "您的测试结果为轻度焦虑"
            } else if (score <= 70) {
              string = "您的测试结果为中度焦虑"
            } else if (score > 70) {
              string = "您的测试结果为重度焦虑"
            }
            $("#result").html(string)

            var option = {
              title: {
                text: 'Sas焦虑测试',
                left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                orient: 'vertical',
                left: 'left'
              },
              series: [
                {
                  name: 'Sas性格占比',
                  type: 'pie',
                  radius: '70%',
                  data: [
                    {value: forward, name: '正向题得分', itemStyle: {color: '#c51313'}},
                    {value: inversion, name: '反向题得分', itemStyle: {color: '#1061ba'}},
                  ],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
          }
        })
      } else if (obj.event === 'del') {
        layer.confirm('您真的删除行么', function (index) {
          // 删除用户信息
          $.ajax({
            url: '${pageContext.request.contextPath}/accountresult/deleteresult',
            type: 'POST',
            dataType: 'JSON',
            data: {id: data.id},
            success: function (data) {
              if (data >= 1) {
                // 关闭对话框
                layer.closeAll();
                // 刷新表格数据
                table.reload('demo');
              }
              layer.msg('成功');
            }
          });
        });
      }
    });
    //监听头工具栏事件
    table.on('toolbar(test)', function (obj) {
      var checkStatus = table.checkStatus(obj.config.id)
              , data = checkStatus.data; //获取选中的数据
      switch (obj.event) {
        case 'delete':
          if (data.length === 0) {
            layer.msg('请选择一行');
          } else {
            layer.confirm('真的删除选中的行么', function (index) {
              //obj.del(); //删除对应行（tr）的DOM结构
              //删除数据库中的数据
              var id = [];
              //遍历数组data，抽取所有的id
              for (let i = 0; i < data.length; i++) {
                id[i] = (data[i].id);
              }
              $.ajax({
                url: "${pageContext.request.contextPath}/accountresult/deletesresult",
                type: "POST",
                dataType: "JSON",
                data: {id: id.join(",")},
                success: function (ret) {
                  if (ret >= 1) {
                    //刷新表格数据
                    myTable.reload({
                      page: {
                        curr: 1 //重新从第 1 页开始
                      }
                    });
                    layer.msg('成功', {icon: 6});
                  } else {
                    layer.msg('失败', {icon: 5});
                  }
                }
              })
              layer.close(index);
              //向服务端发送删除指令
            });
          }
          break;
      }
    })
    //====================================提交条件查询==================================================
    $.ajax({
      url: "${pageContext.request.contextPath}/accountresult/findAllresult",
      type: "POST",
      dataType: "JSON",
      success: function (ret) {
        if (ret.code == 0) {
          //console.log(ret)
          //<option value="0">写作</option>
          var htmlStr = "<option value=''>请选择ID</option>";
          for (let i = 0; i < ret.data.length; i++) {
            htmlStr += "<option value=" + ret.data[i].test_plan_id + ">测试ID：" + ret.data[i].test_plan_id + "</option>"
          }
          // var htmlStr="<option value='男'>男</option>"
          // htmlStr=htmlStr+"<option value='女'>女</option>"
          //console.log(htmlStr)
          $("#cccc").html(htmlStr);
          //重新渲染表单
          layui.use('form', function () {
            form.render('select');
          })
        }
      }
    });
    form.on('submit(selectFormfilter)', function (data) {
      //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
      //提交表单数据
      myTable.reload({
        where: { //设定异步数据接口的额外参数，任意设
          name: data.field.name,
          testPlanId: data.field.test_plan_id
        }
        ,
        page: {
          curr: 1 //重新从第 1 页开始
        }
      });
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });

    ///重置条件查询表单，刷新table数据
    $("#myButton").click(function () {
      myTable.reload({
        where: { //设定异步数据接口的额外参数，任意设
          name: "",
          test_plan_id: ""
          //…
        }
        , page: {
          curr: 1 //重新从第 1 页开始
        }
      });
    })
  })
</script>
</html>

